<template>
	<view class="type">
		<template v-if="url">
			<view class="image" v-if="customStyle != 4">
				<image :src="url"></image>
				<image @click="emits('change', '')" class="del" src="@/static/image/del.png"></image>
			</view>
			<view class="video" v-if="customStyle == 4">
				<video :src="url"></video>
				<image @click="emits('change', '')" class="del" src="@/static/image/del.png"></image>
			</view>
		</template>
		<template v-else>
			<view class="upload" @click="handleUpload" v-if="customStyle != 4">
				<template v-if="customStyle == 1">
					<image src="@/static/image/add.png"></image>
					<view class="text">宠物照片</view>
				</template>
				<template v-if="customStyle == 2">
					<image src="@/static/image/add2.png"></image>
					<view class="text">上传图片</view>
				</template>
				<template v-if="customStyle == 3">
					<image style="width: 116rpx; height: 116rpx;" src="@/static/image/add3.png"></image>
					<view class="text">请上传微信收款码</view>
				</template>
			</view>
			<view class="upload" @click="handleChoice" v-if="customStyle == 4">
				<image src="@/static/image/add2.png"></image>
				<view class="text">上传图片/视频</view>
			</view>
		</template>
	</view>

	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content lint-content">
				<view class="title">
					上传方式
				</view>
				<picker-view :value="choice" @change="handleChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in choices" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import config from '@/config/config.js'
	import utils from '@/utils/util.js'
	const props = defineProps({
		customStyle: {
			type: Number,
			default: 1
		},
		url: {
			type: String,
			default: ''
		}
	})
	const show = ref(false)
	// 选择上传方式
	const handleChoice = () => {
		show.value = true
	}
	const choice = ref([0])
	const choices = ref(['上传图片', '上传视频'])
	const handleChange = (e) => {
		choice.value = e.detail.value
	}
	const handleSumbit = () => {
		if (choice.value[0] == 0) {
			// 上传图片
			handleUpload()
		} else {
			// 上传视频
			handleUploadVideo()
		}
	}
	const emits = defineEmits(['change'])
	const src = ref('')
	const handleUpload = () => {
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths[0];
				show.value = false
				console.log('上传图片');
				uploadFile(tempFilePaths, 1)
			}
		});
	}
	const uploadFile = async (tempFilePaths, type) => {
		uni.uploadFile({
			url: config.baseUrl + 'api/user/uploadFile', //仅为示例，非真实的接口地址
			filePath: tempFilePaths,
			name: 'file',
			formData: {
				token: uni.getStorageSync('token')
			},
			success: (uploadFileRes) => {
				let res = JSON.parse(uploadFileRes.data)
				console.log(res);
				if (res.status == 1) {
					if (props.customStyle == 4) {
						if (type == 1) {
							emits('change', {
								type: 'image',
								src: res.data.fullSrc
							})
						} else {
							emits('change', {
								type: 'video',
								src: res.data.fullSrc
							})
						}
					} else {
						emits('change', res.data.fullSrc)
					}
				} else {
					utils.toast(res.info)
				}
			},
			fail: (e) => {
				console.log('失败', e);
			}
		});
	}

	const handleUploadVideo = () => {
		uni.chooseVideo({
			sourceType: ['camera', 'album'],
			success: function(res) {
				const tempFilePaths = res.tempFilePath;
				show.value = false
				console.log('上传视频');
				uploadFile(tempFilePaths, 2)
			}
		});
	}
</script>

<style lang="scss" scoped>
	.type {
		width: 100%;
		height: 100%;

		.image,
		.video {
			position: relative;
			height: 100%;

			image,
			video {
				width: 100%;
				height: 100%;
			}

			.del {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.upload {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			background: #f6f6f6;
			height: 100%;

			image {
				width: 43rpx;
				height: 43rpx;
			}

			.text {
				text-align: center;
				width: 100%;
				margin-top: -30%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #D7D3D3;
				line-height: 28rpx;
			}
		}

		.image,
		.upload {
			overflow: hidden;
			border-radius: 32rpx;
		}
	}
</style>